<template>
    <div>
        <table>
            <tr>
                <td>名称</td>
                <td>操作</td>
            </tr>
            <tr v-for="i in list">
                <td>{{i.name}}</td>
                <td>
                    <button @click="del(i.id)">删除</button>
                    <button @click="updata1(i.id)">修改</button>
                </td>
            </tr>
            <tr>
                <td>
                    <van-pagination
                        v-model="currentPage"
                        :total-items="total"
                        :items-per-page="3"
                        @change="getlist"
                        force-ellipses
                     />
                </td>
            </tr>
        </table>
        <!-- {{list}} -->
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[],
                currentPage:1,
                total:0
            }
        },
        methods:{
            //v是形参，来接收上边@change传来的当前页
            getlist(v){
                this.currentPage=v
                this.$axios.get('cateM?page='+v)
                .then(res=>{
                    this.list=res.data.list
                    this.total=res.data.total
                })
            },
            del(id){
                this.$axios.delete('cateM?id='+id)
                .then(res=>{
                     this.$toast.fail('删除成功')
                        this.getlist(1)



                })
            },
            updata1(id){
              this.$router.push({path:'/update',query:{id:id}})
            },
        },
        mounted(){
            this.getlist(1)
        },
    }
</script>

<style scoped>

</style>